<template>
  <div class="wallet-kit-modal-content-title">
    <div
      class="wallet-kit-modal-content-title__back"
      v-if="modalContentStack?.[stackFrame].haveBackIcon"
      @click="() => emits('back')"
    >
      <Back />
    </div>
    <div v-else />
    <div style="font-size: 18px; font-weight: 800; text-align: center">
      {{ modalContentStack?.[stackFrame].title }}
    </div>
    <div class="wallet-kit-modal-close" @click="() => emits('close')">
      <Close :width="10" :height="10" />
    </div>
  </div>
</template>
<script setup lang="ts">
  import Back from '../Icons/Back.vue'
  import Close from '../Icons/Close.vue'
  import { inject } from 'vue'

  const props = withDefaults(
    defineProps<{
      uid: string
      stackFrame?: number
    }>(),
    {
      stackFrame: 0
    }
  )

  const emits = defineEmits(['back', 'close'])

  const modalContentStack: any = inject(props.uid)
</script>

<style lang="scss" scoped>
  .wallet-kit-modal-content-title {
    height: 28px;
    position: sticky;
    top: 0;
    background: #1a1b1f;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .wallet-kit-modal-content-title__back {
      width: 25px;
      height: 25px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      cursor: pointer;
      color: #d9fc01;
    }
  }
  .wallet-kit-modal-close {
    color: #999dab;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.04);
  }
</style>
